/**
 * 生成与特征（feature）相关的渐变背景或图案
 * 根据一个 feature 的范围来生成一个特定的背景图案。这个图案主要由白色的背景和灰色的斜线组成，
 * 当 feature 的范围太小时，它会返回一个红色的背景。最后，它返回一个可以重复使用的图案。
 * @param feature
 * @param resolution
 * @param canvas
 * @param context
 * @param pixelRatio
 * @param ol
 * @returns {any}
 */
export const gradient = (feature, resolution, canvas, context, pixelRatio, ol) => {
  // 获取feature的范围----》外接最大矩形
  const extent = feature.getGeometry().getExtent()
  // 获取feature的范围的宽度
  const width = ol.extent.getWidth(extent) / resolution * pixelRatio
  // 获取feature的范围的高度
  const height = ol.extent.getHeight(extent) / resolution * pixelRatio
  // 过滤掉宽高小于1的值（太小就不画线了---太小canvas会报错）
  if (width <= 1 * pixelRatio || height <= 1 * pixelRatio) {
    const grad = context.createLinearGradient(0, 0, ol.extent.getWidth(extent) / resolution * pixelRatio, 0)
    // 宽高太小---》用的红色填充
    grad.addColorStop(0, 'rgb(37,234,48)')
    grad.addColorStop(1, 'rgb(37,234,48)')
    return grad
  }
  // 用的是正方形背景，后面划线好处理一点
  if (width > height) {
    canvas.width = width
    canvas.height = width
  } else {
    canvas.width = height
    canvas.height = height
  }
  // 白色的背景
  context.fillStyle = '#FEFEFE'
  context.fillRect(0, 0, canvas.width, canvas.height)
  // 斜线的颜色
  context.strokeStyle = '#A9A9A9'
  var temp_w = 0
  var temp_y = 0
  // 循环划线
  // eslint-disable-next-line no-constant-condition
  while (true) {
    temp_w += 15 * pixelRatio
    temp_y += 15 * pixelRatio
    if (temp_w > canvas.width && temp_w < 2 * canvas.width) {
      context.beginPath()
      context.moveTo(canvas.width, temp_w - canvas.width)
      context.lineTo(temp_y - canvas.width, canvas.width)
      context.stroke()
    } else if (temp_w <= canvas.width) {
      context.beginPath()
      context.moveTo(temp_w, 0)
      context.lineTo(0, temp_y)
      context.stroke()
    } else {
      break
    }
  }
  return context.createPattern(canvas, 'repeat')
}
